Day5 練習製作簡易待辦事項清單(下)

2024 iThome 鐵人賽

DAY 5

JavaScript

每天都進步一點！從零開始的JavaScript 與基礎網路知識學習系列第 5 篇

16th鐵人賽

karin0720

2024-09-05 21:32:58

94 瀏覽

分享至

大家好，今天要來跟著練習製作簡易待辦事項清單，並稍微加上多一點功能。
HTML

<!DOCTYPE html>
<html>
<head> 
    <title> 待辦事項 </title>
</head>
<body>
    <input class="word" placeholder="新增項目"> 
    <button class="botan">+</button>
    <ul class="list">
    </ul>
    <script src="script.js"></script>
</body>
</html>

.innerHTML= 能一次插入一大段html
win+。表情符號

const words=document.querySelector(".word")
const lists=document.querySelector(".list")
const botan=document.querySelector(".botan")
function newtask(){
    if (words.value==="") return;
    const task=document.createElement("li");
    task.innerHTML=`
        <input type="checkbox" class="tick">
        <label>${words.value}</label>
        <button class="trashcan">🗑️</button>
    `
    const trashcan=task.querySelector(".trashcan");
    trashcan.addEventListener("click",function(){
        task.remove();
    });

    const tick=task.querySelector(".tick");
    tick.addEventListener("change",function(){
        if(tick.checked){ //若打勾方塊被勾選
        task.style.textDecoration="line-through"; //task文字上方畫刪除線
        task.style.color="#999"; //文字顏色改淺灰
        lists.append(task); //移到清單底部
        }
        else{
        task.style.textDecoration="none"; //task文字還原
        task.style.color=""; //顏色還原
        lists.append(task); //移到清單上方
        }
    });
    lists.append(task);
    words.value="";
}

botan.addEventListener("click",newtask);
words.addEventListener("keyup",function(keyname){
if(keyname.key==="Enter") newtask();
});

成果
成果圖